<template>
  <!-- 辖区管理 -- 新增/编辑 -->
  <div>
    <public-modal
      width="1200px"
      :footer="false"
      title="新增备案设备"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <a-form-model
          :model="form"
          :rules="rules"
          ref="form"
          class="formStyle addFectory"
          autocomplete="off"
          layout="vertical"
          :labelCol="{ style: 'width: 100%' }"
        >
          <!-- 设备基本信息 -->
          <div class="device-basic-info">
            <div class="title">
              <div class="icon"></div>
              设备基本信息
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="监测设备型号:" prop="deviceModel">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写监测设备型号"
                    v-model.trim="form.deviceModel"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="生产单位:" prop="productionUnit">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写生产单位"
                    v-model.trim="form.productionUnit"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8"></a-col>
            </a-row>
          </div>

          <!-- 监测因子 -->
          <div class="checkbox-basic-info" style="margin-top: 60px">
            <div class="title">
              <div class="icon"></div>
              监测因子
            </div>

            <div class="checkbox-wrap">
              <a-checkbox-group v-model="form.type">
                <a-checkbox :value="item.value" :key="index" v-for="(item, index) in checkBoxList">
                  {{ item.text }}
                </a-checkbox>
              </a-checkbox-group>
            </div>
          </div>

          <!-- 测量范围 -->
          <div class="device-basic-info" style="margin-top: 20px">
            <div class="title">
              <div class="icon"></div>
              测量范围
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="油烟浓度(mg/m³):">
                  <a-input-number
                    :maxLength="30"
                    size="large"
                    autocomplete="off"
                    placeholder="最小值"
                    :min="0"
                    v-model.trim="form.lampblackMin"
                    @blur="lamMinBlur"
                  />
                  <span style="margin: 0 10px; color: #02c1c7">——</span>
                  <a-input-number
                    :maxLength="30"
                    size="large"
                    :min="0"
                    autocomplete="off"
                    placeholder="最大值"
                    v-model.trim="form.lampblackMax"
                    @blur="lamMaxBlur"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="颗粒物浓度(mg/m³):">
                  <a-input-number
                    :maxLength="30"
                    size="large"
                    :min="0"
                    autocomplete="off"
                    placeholder="最小值"
                    v-model.trim="form.particulateMin"
                    @blur="parMinBlur"
                  />
                  <span style="margin: 0 10px; color: #02c1c7">——</span>
                  <a-input-number
                    :maxLength="30"
                    size="large"
                    :min="0"
                    autocomplete="off"
                    placeholder="最大值"
                    v-model.trim="form.particulateMax"
                    @blur="parMaxBlur"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="非甲烷总烃浓度(mg/m³):">
                  <a-input-number
                    :maxLength="30"
                    size="large"
                    :min="0"
                    autocomplete="off"
                    placeholder="最小值"
                    v-model.trim="form.nonMethaneMin"
                    @blur="nonMinBlur"
                  />
                  <span style="margin: 0 10px; color: #02c1c7">——</span>
                  <a-input-number
                    :maxLength="30"
                    size="large"
                    :min="0.01"
                    autocomplete="off"
                    placeholder="最大值"
                    v-model.trim="form.nonMethaneMax"
                    @blur="nonMaxBlur"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>

          <!-- 资质信息 -->
          <div class="device-basic-info" style="margin-top: 60px">
            <div class="title">
              <div class="icon"></div>
              资质信息
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="生产许可证:">
                  <a-upload-dragger
                    accept=".pdf"
                    :file-list="productionLicenseUrlList"
                    :multiple="false"
                    @change="productionUploadChange"
                    :remove="productionUploadRemove"
                    :customRequest="productionUploadRequest"
                    :showUploadList="showUploadList"
                  >
                    <p class="ant-upload-text" style="color: #02c1c7" v-if="productionLicenseUrl == ''">
                      点击上传PDF格式文档
                    </p>
                    <p class="ant-upload-text" style="color: #02c1c7" v-else>{{ productionLicenseName }}</p>
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="检验报告/检定报告:" class="xing">
                  <a-upload-dragger
                    accept=".pdf"
                    :file-list="inspectionReportUrlList"
                    :multiple="false"
                    @change="inspectionReportChange"
                    :remove="inspectionReportRemove"
                    :customRequest="inspectionReportRequest"
                    :showUploadList="showUploadList"
                  >
                    <p class="ant-upload-text" style="color: #02c1c7" v-if="inspectionReportUrl == ''">
                      点击上传PDF格式文档
                    </p>
                    <p class="ant-upload-text" style="color: #02c1c7" v-else>{{ inspectionReportName }}</p>
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="校准证书报告:" class="xing">
                  <a-upload-dragger
                    accept=".pdf"
                    :file-list="calibrationCertificateUrlList"
                    :multiple="false"
                    @change="calibrationCertificateChange"
                    :remove="calibrationCertificateRemove"
                    :customRequest="calibrationCertificateRequest"
                    :showUploadList="showUploadList"
                  >
                    <p class="ant-upload-text" style="color: #02c1c7" v-if="calibrationCertificateUrl == ''">
                      点击上传PDF格式文档
                    </p>
                    <p class="ant-upload-text" style="color: #02c1c7" v-else>{{ calibrationCertificateName }}</p>
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 135px">
              <a-col :span="8">
                <a-form-model-item label="认证证书:" class="xing">
                  <a-upload-dragger
                    accept=".pdf"
                    :file-list="authenticationCertificateUrlList"
                    :multiple="false"
                    @change="authenticationCertificateChange"
                    :remove="authenticationCertificateRemove"
                    :customRequest="authenticationCertificateRequest"
                    :showUploadList="showUploadList"
                  >
                    <p class="ant-upload-text" style="color: #02c1c7" v-if="authenticationCertificateUrl == ''">
                      点击上传PDF格式文档
                    </p>
                    <p class="ant-upload-text" style="color: #02c1c7" v-else>{{ authenticationCertificateName }}</p>
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="设备使用说明书:" class="xing">
                  <a-upload-dragger
                    accept=".pdf"
                    :file-list="instructionsUrlList"
                    :multiple="false"
                    @change="instructionsChange"
                    :remove="instructionsRemove"
                    :customRequest="instructionsRequest"
                    :showUploadList="showUploadList"
                  >
                    <p class="ant-upload-text" style="color: #02c1c7" v-if="instructionsUrl == ''">
                      点击上传PDF格式文档
                    </p>
                    <p class="ant-upload-text" style="color: #02c1c7" v-else>{{ instructionsName }}</p>
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>
              <a-col :span="8"></a-col>
            </a-row>
          </div>

          <!-- 设备照片 -->
          <div class="device-basic-info" style="margin-top: 145px">
            <div class="title">
              <div class="icon"></div>
              设备照片
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="内部清晰照片:" class="xing">
                  <a-upload-dragger
                    accept=".img,.png,.jpg"
                    :file-list="internalUrlList"
                    :multiple="false"
                    @change="internalChange"
                    :remove="internalRemove"
                    :customRequest="internalRequest"
                    :showUploadList="showUploadList"
                  >
                    <div v-if="internalUrl == ''">
                      <img src="@/assets/imgs/fillingManagement/uploadImgIcon.png" alt="" />
                      <p class="ant-upload-text" style="color: #02c1c7; font-size: 12px">点击上传</p>
                    </div>
                    <img :src="imgPrefix + internalUrl" style="width: 358px; height: 98px; object-fit: cover" v-else />
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="外部清晰照片:" class="xing">
                  <a-upload-dragger
                    accept=".img,.png,.jpg"
                    :file-list="externalUrlList"
                    :multiple="false"
                    @change="externalChange"
                    :remove="externalRemove"
                    :customRequest="externalRequest"
                    :showUploadList="showUploadList"
                  >
                    <div v-if="externalUrl == ''">
                      <img src="@/assets/imgs/fillingManagement/uploadImgIcon.png" alt="" />
                      <p class="ant-upload-text" style="color: #02c1c7; font-size: 12px">点击上传</p>
                    </div>
                    <img :src="imgPrefix + externalUrl" style="width: 358px; height: 98px; object-fit: cover" v-else />
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="铭牌照片:" class="xing">
                  <a-upload-dragger
                    accept=".img,.png,.jpg"
                    :file-list="nameplateUrlList"
                    :multiple="false"
                    @change="nameplateChange"
                    :remove="($event) => nameplateRemove($event, 'nameplateUrl')"
                    :customRequest="nameplateRequest"
                    :showUploadList="showUploadList"
                  >
                    <div v-if="nameplateUrl == ''">
                      <img src="@/assets/imgs/fillingManagement/uploadImgIcon.png" alt="" />
                      <p class="ant-upload-text" style="color: #02c1c7; font-size: 12px">点击上传</p>
                    </div>
                    <!-- object-fit:cover 确保图片按照比例缩放并填满容器 超出部分裁剪 类似背景图的cover属性 -->
                    <img :src="imgPrefix + nameplateUrl" style="width: 358px; height: 98px; object-fit: cover" v-else />
                  </a-upload-dragger>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </a-form-model>
      </div>
    </public-modal>
  </div>
</template>

<script>
import { factoryDeviceTypeAdd } from '@/api/factory'
import publicModal from '@/components/publicModal'
import { uploadUeditorImg } from '@/api/api'
import { comMethods } from '@/mixins/comMethods'
export default {
  name: 'add',
  mixins: [comMethods],
  components: { publicModal },
  data() {
    return {
      checkBoxList: [],
      showUploadList: true,
      publicVisible: false,
      // showUploadList: {
      //   showPreviewIcon: false,
      // },
      imgPrefix: '',

      form: {},
      records: {},
      rules: {
        deviceModel: [{ required: true, message: '请填写监测设备型号', trigger: 'change' }],
        productionUnit: [{ required: true, message: '请填写生产单位', trigger: 'change' }],
      },

      productionLicenseUrl: '',
      productionLicenseName: '',
      productionLicenseUrlList: [], // 生产许可证
      inspectionReportUrl: '',
      inspectionReportName: '',
      inspectionReportUrlList: [], // 检验报告
      calibrationCertificateUrl: '',
      calibrationCertificateName: '',
      calibrationCertificateUrlList: [], // 校准证书报告
      authenticationCertificateUrl: '',
      authenticationCertificateName: '',
      authenticationCertificateUrlList: [], // 认证证书
      instructionsUrl: '',
      instructionsName: '',
      instructionsUrlList: [], // 设备使用说明书

      internalUrl: '',
      internalUrlList: [],
      externalUrl: '',
      externalUrlList: [],
      nameplateUrl: '',
      nameplateUrlList: [],
    }
  },
  mounted() {},
  methods: {
    async show(records) {
      this.records = records
      this.checkBoxList = JSON.parse(localStorage.getItem('factoryMonitoringType'))
      this.publicVisible = true
    },

    productionUploadChange(info) {
      console.log(info, 'infoproductionUploadChange')
      this.productionLicenseUrlList = []
      info.file.status = 'done'
      //info.fileList.at(-1)获取数组的最后一个元素
      this.productionLicenseUrlList.push(info.fileList.at(-1))
      console.log(this.productionLicenseUrlList)
    },
    productionUploadRemove(info) {
      console.log('remove是api...')
      this.productionLicenseUrl = ''
      this.productionLicenseUrlList = []
      return false
    },
    async productionUploadRequest(info) {
      console.log('customRequest是api...', info)
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.productionLicenseUrl = result.halfPath
        this.productionLicenseName = info.file.name
      } catch {
        this.productionLicenseUrl = ''
        this.this.productionLicenseName = ''
        this.productionLicenseUrlList = []
      }
    },

    inspectionReportChange(info) {
      this.inspectionReportUrlList = []
      info.file.status = 'done'
      this.inspectionReportUrlList.push(info.fileList.at(-1))
    },
    inspectionReportRemove() {
      this.inspectionReportUrl = ''
      this.inspectionReportUrlList = []
      return false
    },
    async inspectionReportRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.inspectionReportUrl = result.halfPath
        this.inspectionReportName = info.file.name
      } catch {
        this.inspectionReportUrl = ''
        this.inspectionReportName = ''
        this.inspectionReportUrlList = []
      }
    },

    calibrationCertificateChange(info) {
      this.calibrationCertificateUrlList = []
      info.file.status = 'done'
      this.calibrationCertificateUrlList.push(info.fileList.at(-1))
    },
    calibrationCertificateRemove() {
      this.calibrationCertificateUrl = ''
      this.calibrationCertificateUrlList = []
      return false
    },
    async calibrationCertificateRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.calibrationCertificateUrl = result.halfPath
        this.calibrationCertificateName = info.file.name
      } catch {
        this.calibrationCertificateUrl = ''
        this.calibrationCertificateName = ''
        this.calibrationCertificateUrlList = []
      }
    },

    authenticationCertificateChange(info) {
      this.authenticationCertificateUrlList = []
      info.file.status = 'done'
      this.authenticationCertificateUrlList.push(info.fileList.at(-1))
    },
    authenticationCertificateRemove() {
      this.authenticationCertificateUrl = ''
      this.authenticationCertificateUrlList = []
      return false
    },
    async authenticationCertificateRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.authenticationCertificateUrl = result.halfPath
        this.authenticationCertificateName = info.file.name
      } catch {
        this.authenticationCertificateUrl = ''
        this.authenticationCertificateName = ''
        this.authenticationCertificateUrlList = []
      }
    },

    instructionsChange(info) {
      this.instructionsUrlList = []
      info.file.status = 'done'
      this.instructionsUrlList.push(info.fileList.at(-1))
    },
    instructionsRemove() {
      this.instructionsUrl = ''
      this.instructionsUrlList = []
      return false
    },
    async instructionsRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.instructionsUrl = result.halfPath
        this.instructionsName = info.file.name
      } catch {
        this.instructionsUrl = ''
        this.instructionsName = ''
        this.instructionsUrlList = []
      }
    },

    internalChange(info) {
      this.internalUrlList = []
      info.file.status = 'done'
      this.internalUrlList.push(info.fileList.at(-1))
    },
    internalRemove() {
      this.internalUrl = ''
      this.internalUrlList = []
      return false
    },
    async internalRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.internalUrl = result.halfPath
      } catch {
        this.internalUrl = ''
        this.internalUrlList = []
      }
    },

    internalChange(info) {
      this.internalUrlList = []
      info.file.status = 'done'
      this.internalUrlList.push(info.fileList.at(-1))
    },
    internalRemove() {
      this.internalUrl = ''
      this.internalUrlList = []
      return false
    },
    async internalRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.internalUrl = result.halfPath
      } catch {
        this.internalUrl = ''
        this.internalUrlList = []
      }
    },

    externalChange(info) {
      this.externalUrlList = []
      info.file.status = 'done'
      this.externalUrlList.push(info.fileList.at(-1))
    },
    externalRemove() {
      this.externalUrl = ''
      this.externalUrlList = []
      return false
    },
    async externalRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.externalUrl = result.halfPath
      } catch {
        this.externalUrl = ''
        this.externalUrlList = []
      }
    },

    nameplateChange(info) {
      this.nameplateUrlList = []
      info.file.status = 'done'
      this.nameplateUrlList.push(info.fileList.at(-1))
    },
    nameplateRemove(info, variableName) {
      console.log(info, variableName, 'info, a')
      // console.log(this.${variableName})
      this.nameplateUrl = ''
      this.nameplateUrlList = []
      return false
    },
    async nameplateRequest(info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', 12)
      formData.get('file')
      try {
        let { result } = await uploadUeditorImg(formData)
        this.nameplateUrl = result.halfPath
      } catch {
        this.nameplateUrl = ''
        this.nameplateUrlList = []
      }
    },

    lamMinBlur() {
      let { lampblackMin, lampblackMax } = this.form
      if (lampblackMax != undefined && lampblackMax != '') {
        if (lampblackMin > lampblackMax) {
          this.form.lampblackMin = ''
          this.$message.error('油烟浓度最大值不能小于最小值')
        }

        if (lampblackMin == lampblackMax) {
          this.form.lampblackMin = ''
          this.form.lampblackMax = ''
          this.$message.error('油烟浓度最大值不能小于最小值')
        }
      }
    },
    lamMaxBlur() {
      let { lampblackMin, lampblackMax } = this.form
      if (lampblackMin != undefined) {
        if (lampblackMax < lampblackMin) {
          this.form.lampblackMax = ''
          this.$message.error('油烟浓度最大值不能小于最小值')
        }

        if (lampblackMin == lampblackMax) {
          this.form.lampblackMin = ''
          this.form.lampblackMax = ''
          this.$message.error('油烟浓度最大值不能小于最小值')
        }
      }
    },

    parMinBlur() {
      let { particulateMin, particulateMax } = this.form
      if (particulateMax != undefined && particulateMax != '') {
        if (particulateMin > particulateMax) {
          this.form.particulateMin = ''
          this.$message.error('颗粒物浓度最大值不能小于最小值')
        }

        if (particulateMin == particulateMax) {
          this.form.particulateMin = ''
          this.form.particulateMax = ''
          this.$message.error('颗粒物浓度最大值不能小于最小值')
        }
      }
    },
    parMaxBlur() {
      let { particulateMin, particulateMax } = this.form
      if (particulateMin != undefined && particulateMax != '') {
        if (particulateMax < particulateMin) {
          this.form.particulateMax = ''
          this.$message.error('颗粒物浓度最大值不能小于最小值')
        }

        if (particulateMin == particulateMax) {
          this.form.particulateMin = ''
          this.form.particulateMax = ''
          this.$message.error('颗粒物浓度最大值不能小于最小值')
        }
      }
    },

    nonMinBlur() {
      let { nonMethaneMin, nonMethaneMax } = this.form
      if (nonMethaneMax != undefined) {
        if (nonMethaneMin > nonMethaneMax) {
          this.form.nonMethaneMin = ''
          this.$message.error('非甲烷总烃浓度最大值不能小于最小值')
        }

        if (nonMethaneMin == nonMethaneMax) {
          this.form.nonMethaneMin = ''
          this.form.nonMethaneMax = ''
          this.$message.error('非甲烷总烃浓度最大值不能小于最小值')
        }
      }
    },
    nonMaxBlur() {
      let { nonMethaneMin, nonMethaneMax } = this.form
      if (nonMethaneMin != undefined) {
        if (nonMethaneMax < nonMethaneMin) {
          this.form.nonMethaneMax = ''
          this.$message.error('非甲烷总烃浓度最大值不能小于最小值')
        }

        if (nonMethaneMin == nonMethaneMax) {
          this.form.nonMethaneMin = ''
          this.form.nonMethaneMax = ''
          this.$message.error('非甲烷总烃浓度最大值不能小于最小值')
        }
      }
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return

        if (this.form.type == undefined || this.form.type.length == 0) {
          this.$message.error('监测因子不能为空')
          return
        }

        if (this.form.lampblackMin === undefined || this.form.lampblackMin === '') {
          this.$message.error('油烟浓度最小值不能为空')
          return
        }

        if (this.form.lampblackMax === undefined || this.form.lampblackMax === '') {
          this.$message.error('油烟浓度最大值不能为空')
          return
        }

        if (this.form.particulateMin === undefined || this.form.particulateMin === '') {
          this.$message.error('颗粒物浓度最小值不能为空')
          return
        }

        if (this.form.particulateMax === undefined || this.form.particulateMax === '') {
          this.$message.error('颗粒物浓度最大值不能为空')
          return
        }

        if (this.form.nonMethaneMin === undefined || this.form.nonMethaneMin === '') {
          this.$message.error('非甲烷总烃浓度最小值不能为空')
          return
        }

        if (this.form.nonMethaneMax === undefined || this.form.nonMethaneMax === '') {
          this.$message.error('非甲烷总烃浓度最大值不能为空')
          return
        }

        // if (this.productionLicenseUrl == '') {
        //   this.$message.error('请上传生产许可证')
        //   return
        // }

        if (this.inspectionReportUrl == '') {
          this.$message.error('请上传检验报告')
          return
        }

        if (this.calibrationCertificateUrl == '') {
          this.$message.error('请上传校准证书报告')
          return
        }

        if (this.authenticationCertificateUrl == '') {
          this.$message.error('请上传认证证书')
          return
        }

        if (this.instructionsUrl == '') {
          this.$message.error('请上传设备使用说明书')
          return
        }

        if (this.internalUrl == '') {
          this.$message.error('请上传内部清晰照片')
          return
        }

        if (this.externalUrl == '') {
          this.$message.error('请上传外部清晰照片')
          return
        }

        if (this.externalUrl == '') {
          this.$message.error('请上传铭牌照片')
          return
        }

        const data = {
          factoryId: this.records.id,
          deviceModel: this.form.deviceModel,
          productionUnit: this.form.productionUnit,
          monitoringFactors: this.form.type.join(','),
          lampblackMin: this.form.lampblackMin,
          lampblackMax: this.form.lampblackMax,
          particulateMin: this.form.particulateMin,
          particulateMax: this.form.particulateMax,
          nonMethaneMin: this.form.nonMethaneMin,
          nonMethaneMax: this.form.nonMethaneMax,
          productionLicenseUrl: this.productionLicenseUrl,
          productionLicenseName: this.productionLicenseName,
          inspectionReportUrl: this.inspectionReportUrl,
          inspectionReportName: this.inspectionReportName,
          calibrationCertificateUrl: this.calibrationCertificateUrl,
          calibrationCertificateName: this.calibrationCertificateName,
          authenticationCertificateUrl: this.authenticationCertificateUrl,
          authenticationCertificateName: this.authenticationCertificateName,
          instructionsUrl: this.instructionsUrl,
          instructionsName: this.instructionsName,
          internalUrl: this.internalUrl,
          externalUrl: this.externalUrl,
          nameplateUrl: this.nameplateUrl,
        }

        let res = await factoryDeviceTypeAdd(data)
        this.$message.success(res.message)
        this.$emit('refresh')
        this.cancel()
      })
    },

    cancel() {
      this.publicVisible = false
      this.form = {}

      this.productionLicenseUrl = ''
      this.productionLicenseName = ''
      this.productionLicenseUrlList = []
      this.inspectionReportUrl = ''
      this.inspectionReportName = ''
      this.inspectionReportUrlList = []
      this.calibrationCertificateUrl = ''
      this.calibrationCertificateName = ''
      this.calibrationCertificateUrlList = []
      this.authenticationCertificateUrl = ''
      this.authenticationCertificateName = ''
      this.authenticationCertificateUrlList = []
      this.instructionsUrl = ''
      this.instructionsName = ''
      this.instructionsUrlList = []
      this.internalUrl = ''
      this.internalUrlList = []
      this.externalUrl = ''
      this.externalUrlList = []
      this.nameplateUrl = ''
      this.nameplateUrlList = []

      this.records = {}
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .ant-form-item-children {
  display: flex;
  align-items: center;
}

/deep/ .ant-upload {
  padding: 0 !important;
}

/deep/ .ant-upload-drag {
  width: 360px;
  height: 100px;
  background: rgba(8, 85, 88, 0.7804);
  border: 1px solid #036265;
}

/deep/ .anticon-paper-clip {
  color: #00f8ff;
}
/deep/ .ant-upload-list {
  color: #00f8ff;
}

/deep/ .anticon-delete {
  color: #00f8ff;
}

/deep/ .ant-upload-list-item-info:hover {
  background: transparent;
}

.formStyle {
  padding: 0.2rem 0.5rem 1.2rem 0.5rem;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .icon {
      width: 8px;
      height: 8px;
      margin-right: 6px;
      background: #00f8ff;
    }
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #00f8ff;
  }

  .checkbox-wrap {
    width: 1100px;
    height: 56px;
    padding-left: 10px;
    background: rgba(8, 85, 88, 0.7804);
    border-radius: 4px;
    border: 1px solid #036265;
    line-height: 56px;

    overflow-x: auto;
    &::-webkit-scrollbar {
      width: 0;
    }

    .ant-checkbox-wrapper {
      color: #02c1c7;
    }

    /deep/ .ant-checkbox-inner {
      background-color: #065355;
      border: 1px solid #017d80;
    }
  }
}

// /deep/ .ant-upload.ant-upload-select-picture-card,
// .ant-upload {
//   background: #065054;
//   border-color: #036265;
// }
</style>
